<template>
  <div id="building">
    <el-row>
      <Header></Header>
    </el-row>
    <el-row>
      <el-col :span="12" :offset="6">
        <el-row>
          <div class="background">
            <el-image class="backImg" :src="url" :preview-src-list="srcList">
            </el-image>
          </div>
        </el-row>
        <el-card class="box-card">
          <el-row>
            <el-col :span="3">
              <el-image
                style="width: 100px; height: 100px"
                :src="backgroundUrl"
                :preview-src-list="backgroundSrcList"
              >
              </el-image>
            </el-col>
            <el-col :span="12" style="text-align: left">
              <el-row>
                <span>爷傲奈我何</span>
              </el-row>
              <el-row class="simIntor">
                <el-col :span="5">
                  <span class="data">1000</span
                  ><span class="dataIntro">被访问</span>
                  <el-divider
                    direction="vertical"
                    class="verticalsplit"
                  ></el-divider>
                </el-col>
                <el-col :span="5">
                  <span class="data">1000</span
                  ><span class="dataIntro">原创</span>
                  <el-divider
                    direction="vertical"
                    class="verticalsplit"
                  ></el-divider>
                </el-col>
                <el-col :span="5">
                  <span class="data">1000</span
                  ><span class="dataIntro">粉丝</span>
                  <el-divider
                    direction="vertical"
                    class="verticalsplit"
                  ></el-divider>
                </el-col>
                <el-col :span="5">
                  <span class="data">1000</span
                  ><span class="dataIntro">关注</span>
                </el-col>
              </el-row>
              <el-row style="margin-top: 5px">
                <el-collapse accordion>
                  <el-collapse-item title="详细资料">
                    <div>
                      控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;
                    </div>
                    <div>
                      页面反馈:操作后，通过页面元素的变化清晰地展现当前状态。
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </el-row>
            </el-col>
            <el-col :span="8" style="text-align: right">
              <div style="margin-top: 70px">
                <el-button round size="small">编辑资料</el-button>
                <el-button round size="small">上传背景</el-button>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="9" :offset="6">
        <el-card>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="动态" name="first">
              <SimpleArticle></SimpleArticle>
              <SimpleArticle></SimpleArticle>
              <SimpleArticle></SimpleArticle>
            </el-tab-pane>
            <el-tab-pane label="点赞" name="second">
              <SimpleArticle></SimpleArticle>
              <SimpleArticle></SimpleArticle>
              <SimpleArticle></SimpleArticle>
            </el-tab-pane>
            <el-tab-pane label="评论" name="third">评论</el-tab-pane>
            <el-tab-pane label="分享" name="fourth">分享</el-tab-pane>
            <el-tab-pane label="收藏" name="fifth">收藏</el-tab-pane>
            <el-tab-pane label="关注" name="sixth">关注</el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
      <!-- 侧边栏 -->
      <el-col :span="3">
        <el-card class="box-card">
          <el-row style="text-align: left">
            <span>个人成就</span>
          </el-row>
          <el-divider class="split"></el-divider>
          <el-row class="achieverow">
            <el-row>
              <i class="blogfont def-icondianzan1 achieverow"></i
              >&emsp;获得&nbsp;865&nbsp;次点赞
            </el-row>
            <el-row>
              <i class="el-icon-chat-dot-round achieverow"></i
              >&emsp;获得&nbsp;865&nbsp;次评论
            </el-row>
            <el-row>
              <i class="el-icon-star-off achieverow"></i
              >&emsp;获得&nbsp;865&nbsp;次收藏
            </el-row>
            <el-row> <i class="el-icon-date"></i>&emsp;创作历程</el-row>
            <el-row>
              <el-card class="box-card createProgress">
                <el-col :span="12">
                  <el-row class="articleNum">
                    <el-link href="#" target="_blank" :underline="false" style="font-size:large"
                      >30篇</el-link
                    >
                  </el-row>
                  <el-row class="articleNum">
                    <span>
                      2022年
                    </span>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <el-row class="articleNum">
                    <el-link href="#" target="_blank" :underline="false" style="font-size:large"
                      >35篇</el-link
                    >
                  </el-row>
                  <el-row class="articleNum">
                    <span>
                      2021年
                    </span>
                  </el-row>
                </el-col>
              </el-card>
            </el-row>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import SimpleArticle from "@/components/SimpleArticle.vue";
export default {
  data() {
    return {
      commentVisible: false,
      url: "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
      ],
      backgroundUrl:
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
      backgroundSrcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
      ],
      activeName: "first",
    };
  },
  components: { Header, Comment, Header, SimpleArticle },
  methods: {
    //打开评论组件
    openComment() {
      this.commentVisible = !this.commentVisible;
    },
  },
};
</script>

<style scoped>
.data {
  font-size: 15px;
  font-weight: 600;
}
.dataIntro {
  font-size: 10px;
  margin-left: 2px;
}
.simIntor {
  text-align: left;
  margin-top: 10px;
}
/* #building{
  background:url("https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg");
  width:100%;
  height:100%;
  position:fixed;
  background-size:100% 100%;
} */
.background {
  height: 200px;
  width: 100%;
}
.backImg {
  height: 200px;
  width: 100%;
  z-index: -1;
  border-radius: 4px;
}
.split {
  margin-top: 10px;
  margin-bottom: 10px;
}
.achieverow {
  font-size: 14px;
  text-align: left;
  line-height: 30px;
}
.createProgress {
  background-color: azure;
}
.articleNum {
  text-align: center;
  
}
</style>
